<template>
	<div id="one-explain" class="user-wrap">
		<div v-if="flag === 1" class="word">{{ addition.word }}</div>
		<div class="user-wrap__name" v-text="'用户:'+ addition.username"></div>
		<i class="el-icon-thumb" style="cursor: pointer;" @click="handlPlusLike()"><div class="user-wrap__like" v-text="addition.prefercount"></div></i>
		<div class="user-wrap__content" v-text="addition.concept"></div>
		<div class="user-wrap__content1" v-show="showDetail" v-text="addition.description"></div>
		<!--<a class="user-wrap__link" :href="user.detailLink">详情</a>--> 
		<a class="user-wrap__link" @click="showDetail = !showDetail" >详情</a>
	</div>
</template>
<script>
	import {setCookie,getCookie} from '../js/cookieUtil'
	import common from './Common.vue'
	export default {
		name: "oneExplain",
		props:{
			addition: {
				username: String,
				concept: String,
				description: String,
				id: Number,
				prefercount: Number,
				word: String
			},
			flag:{
				type: Number,
				default: 0
			}
		},
		data(){
			return {
				showDetail: false	
			}
		},
		methods: {
			handlPlusLike() {
				if(common.userName == ''){
					alert("请先登录后再点赞")
					return
				}
				if(getCookie('islogin')!='--'){
				var that = this;
				this.$axios.post('api/setprefer', {
						userName: that.addition.username,
						id: that.addition.id,
					})
					.then(function(response) {
						console.log(response); //返回当前用户是否点赞,若没有点赞，后台自行加一
						if (response.data.code===1) {
							that.addition.prefercount+=1;
						} else {
							that.$alert('你已收藏过此内容，请勿重复收藏', '对不起', {
								confirmButtonText: '确定',
								callback: action => {
									that.$message({
										type: 'info',
										message: `action: ${ action }`
									});
								}
							});
						}
					})
					.catch(function(error) {
						console.log(error);
					});
				}
				
			},
		},
		mounted() {
			console.log(this.addition)
		}
	}
</script>

<style lang="less" scoped>
	.word {
		width: 100%;
	}
	.user-wrap {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		min-height: 100px;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 10px;
		margin-top: 10px;
		padding: 5px;
		background: gainsboro;
	}
    .user-wrap__name {
		width: 40%;
		height: 30px;
		text-align: left;
	}
	
	.user-wrap__like {
/* 		width: 40%;
		height: 30px;
		text-align: right; */
	}
	
	.user-wrap__content {
		width: 80%;
		height: 50px;
		text-align: left;
		word-break: break-word;
	}
	
	.user-wrap__content1 {
		width: 80%;
		min-height: 50px;
		text-align: left;
		word-break: break-word;
	}
	
	.user-wrap__link {
		width: 100%;
		text-align: right;
	}
</style>
